@import '@/app/styles/variables';

.title {
  text-align: center;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 40px;
  /* 125% */
  margin-bottom: 32px;
}

.exit {
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  /* 137.5% */
  cursor: pointer;
}

.closeCircle {
  position: absolute;
  top: 24px;
  right: 24px;
  cursor: pointer;

  &:hover rect {
    fill: #e1e1e1;
  }
}

.chevronLeft {
  position: absolute;
  top: 24px;
  left: 24px;
  cursor: pointer;

  &:hover rect {
    fill: #e1e1e1;
  }
}

.choose {
  display: none;
}

.fadedMobile {
  display: none;
}

.home {
  display: none;
}

@include media(xs) {
  .exit {
    text-align: center;
    /* Mobile/Description/Small/Regular */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    /* 142.857% */
  }

  .home {
    display: block;
    position: absolute;
    top: 12px;
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
  }

  .titleSent {
    text-align: center;
    /* Mobile/Headline/H2 */
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    /* 125% */
  }

  .closeCircleMobile {
    position: absolute;
    top: 16px;
    right: 16px;
  }

  .goBack {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    color: var(--simple-gray-evening, #ababab);
    /* Mobile/Description/Small/Regular */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    /* 142.857% */
  }

  .sent {
    text-align: center;
    font-size: 16px;
    font-style: normal;
    word-break: break-all;
    word-wrap: break-word;
    align-self: center;
    font-weight: 400;
    width: 343px;
    line-height: 22px;
    /* 137.5% */
  }

  .title {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    /* 125% */
    position: static;
  }

  .choose {
    display: block;
    position: fixed;
    bottom: -26px;
    border-radius: 30px 30px 00px 0px;
    width: 100%;
    z-index: 100;
    background-color: white;
    height: 258px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0px 16px 0px 16px;
    gap: 24px;
    -webkit-border-radius: 30px 30px 00px 0px;
    -moz-border-radius: 30px 30px 00px 0px;
    -ms-border-radius: 30px 30px 00px 0px;
    -o-border-radius: 30px 30px 00px 0px;
  }

  .chooseConvert {
    display: block;
    position: absolute;
    bottom: -14%;
    border-radius: 30px 30px 00px 0px;
    width: 100%;
    z-index: 100;
    background-color: white;
    height: 65%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0px 16px 0px 16px;
    gap: 24px;
    -webkit-border-radius: 30px 30px 00px 0px;
    -moz-border-radius: 30px 30px 00px 0px;
    -ms-border-radius: 30px 30px 00px 0px;
    -o-border-radius: 30px 30px 00px 0px;
  }
}
